<%--
  Created by IntelliJ IDEA.
  User: Al Sah-him
  Date: 2018/7/5
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/global.jsp" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0, user-scalable=0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<html>
<head>
    <jsp:include page="../common/include.jsp"/>
    <title>企业营销 </title>
    <style>
        p {
            margin: 0;
            padding: 0;
        }

        .banner {
            background-color: #142F55;
            height: 600px;
            width: 100%;
            background-size: cover;
        }

        .commonBg {
            width: 100%;
            background: #091a2E;
        }

        .title {
            font-size: 34px;
            text-align: center;
            color:rgba(255,255,255,1);
            line-height:30px;
            letter-spacing: 1px;
            padding-top: 70px;
        }

        .enTitle {
            font-size: 16px;
            color:rgba(136,146,153,1);
            padding: 20px 0 20px 0;
            text-align: center;
        }

        .line {
            width: 50px;
            height: 2px;
            background: -webkit-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: -o-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: -moz-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: linear-gradient(left, #11343E, #2AD1FD, #11343E);
            border-radius: 1px;
            margin: 0 auto;
        }

        .content {
            width: 1190px;
            text-align: center;
            margin: 0px auto;
        }

        /* 5大优势 */
        .fiveAdvantages {
            height: 487px;
        }
        .fiveAdvantages .content {
            height: 100%;
        }
        .fiveAdvantages .cont {
            height: 230px;
            margin-top: 50px;
            text-align: center;
        }

        /* 服务 */
        .service {
            height: 505px;
        }
        .service .content {
            height: 100%;
        }
        .service .cont {
            width: 1098px;
            text-align: center;
            margin: 50px auto 0px auto;
            height: 300px;
        }
        .service .cont .cont_img {
            height: 112px;
            background-image: url("${frontPath}/images/QYMarketing/service.png");
            background-repeat: no-repeat;
        }
        .service .cont .cont_txt {
            float: left;
            width: 162px;
            margin-left: 49px;
            text-align: center;
        }
        .service .cont .cont_top {
            margin-top: -135px;
        }
        .service .cont .cont_bottom {
            margin-top: -80px;
        }

        .service .cont_txt_t  {
            font-size:24px;
            color:rgba(255,255,255,1);
            line-height:30px;
            font-weight: 100!important;
        }
        .service .cont_txt_b  {
            font-size:20px;
            color:rgba(132,164,211,1);
            line-height:28px;
            margin-top: 50px;
        }

        /* 技术支持 */
        .technicalSupport {
            height: 465px;
        }
        .technicalSupport .content {
            height: 100%;
        }
        .technicalSupport .cont {
            width: 100%;
            height: 144px;
            margin: 50px auto 0px;
        }
        .technicalSupport .cont .cont_t {
            float: left;
            width: 274px;
            height: 144px;
            border: 1px solid #2AD1FD;
        }
        .technicalSupport .cont_t img {
            width: 268px;
            height: 138px;
            margin: 2px 2px;
        }
        .technicalSupport .cont_bottom {
            width: 100%;
            height: 24px;
            margin-top: 24px;
            text-align: center;
        }
        .technicalSupport .cont_bottom .cont_bottom_txt {
            width: 264px;
            margin: 0;
            padding: 0;
            font-size:22px;
            color:rgba(255,255,255,1);
            line-height:30px;
            font-weight: 100!important;
        }
        .technicalSupport .cont_hr {
            width: 2px;
            height: 24px;
            margin: 0;
            padding: 0;
            background-color: #183153;
        }
        /*  */
        .medium .medium_down {
            height: 290px;
            margin-top: 120px;
        }
        .medium .medium_down .medium_down_l {
            float: left;
            width: 7%;
        }
        .medium .medium_down_l div {
            width: 100%;
            height: 80px;
            border-left: 1px solid #2AD1FD;
            border-top: 1px solid #2AD1FD;
        }
        .medium .medium_down .medium_down_in {
            float: left;
            width: 86%;
            height: 290px;
            padding: 40px 12px;
        }
        .medium .medium_down .medium_down_in_txt {
            float: left;
            width: 249px;
            height: 211px;
            text-align: center;
        }
        .medium .medium_down_in .medium_in_title {
            font-size:24px;
            color:rgba(255,255,255,1);
            line-height:30px;
            letter-spacing: 3px;
        }
        .medium .medium_down_in .medium_in_txt {
            font-size:24px;
            color:rgba(132,164,211,1);
            line-height: 35px;
            letter-spacing: 3px;
        }
        .medium .medium_down .medium_down_in_hr {
            float: left;
            width: 1px;
            height: 211px;
            background-color: #183153;
        }
        .medium .medium_down .medium_down_r {
            float: right;
            width: 7%;
        }


        /* 媒介 */
        .medium {
            height: 960px;
        }
        .medium .content {
            height: 100%;
        }
        .medium .cont {
            width: 88%;
            height: 275px;
            margin: 50px auto 0px;
        }
        .medium .cont .cont_l {
            float: left;
            width: 50%;
            text-align: left;
        }
        .medium .cont .cont_r {
            float: left;
            width: 50%;
            text-align: left;
            position: relative;
        }
        .medium .cont .cont_txt {
            font-size:22px;
            color:rgba(255,255,255,1);
            line-height:30px;
            margin: 0;
            padding: 0;
            font-weight: 100!important;
        }
        .medium .cont_l .cont_in {
            width: 253px;
            height: 60px;
            margin: 30px 0px;
            text-align: center;
            line-height: 55px!important;
            color: rgba(42,209,253,1) !important;
            border: 1px solid #2AD1FD;
        }
        .medium .cont_r .cont_img {
            width: 250px;
            height: 274px;
            border: 1px solid #2AD1FD;
        }
        .medium .cont_r .cont_img img {
            width: 244px;
            height: 268px;
            margin: 2px 2px;
        }
        .medium .cont_r .cont_txt_line {
            width:25px;
            height:1px;
            margin-right: 20px;
            background:rgba(42,209,253,1);
        }
        .medium .cont_r .cont_rr {
            position: absolute;
            top: 15px;
        }


        /* 案例 */
        .case {
            height: 805px;
        }
        .case .content {
            height: 100%;
        }
        .case .cont {
            width: 100%;
            height: 290px;
            margin-top: 50px;
        }
        .case .cont .cont_l {
            float: left;
            width: 604px;
            height: 100%;
            text-align: left;
            background-clip:padding-box,border-box;
            background-origin:padding-box,border-box;
            background-image:linear-gradient(135deg,#091a2E,#091a2E),linear-gradient(135deg,#07182C,#2AD1FD);
            border-bottom:1px transparent solid;
        }
        .case .cont_l .cont_l_vadio {
            width: 520px;
            height: 290px;
            margin: 0;
            padding: 0;
            margin-left: 50px;
        }
        .case .cont .cont_in {
            float: left;
            width: 35px;
            height: 100%;
        }
        .case .cont_in .cont_in_top {
            width: 100%;
            height: 54px;
        }
        .case .cont_in .cont_in_down {
            position: relative;
            width: 100%;
            height: 235px;
            border-top: 1px solid #2AD1FD;
            border-left: 1px solid #2AD1FD;
        }
        .case .cont_in_down .cont_in_down_yuan {
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: #2AD1FD;
            position: absolute;
            right: -5px;
            top: -5px;
        }
        .case .cont .cont_r {
            float: left;
            width: 395px;
            height: 100%;
            text-align: left;
            margin-left: 45px;
            padding: 38px 45px;
        }
        .case .cont_r .line {
            margin: 20px 0px!important;
        }
        .case .cont .cont_r .cont_r_title {
            font-size: 22px;
            color:rgba(255,255,255,1);
            line-height:30px;
        }
        .case .cont .cont_r .cont_r_txt {
            font-size:18px;
            color:rgba(132,164,211,1);
            line-height:30px;
        }
        .case .down {
            width: 100%;
            height: 170px;
            margin-top: 70px;
        }
        .case .down .down_img {
            float: left;
            width: 258px;
            height: 100%;
            padding-top: 4px;
            margin-right: 52px;
            border: 1px solid #2AD1FD;
        }
        .case .down .down_img img {
            width: 248px;
            height: 160px;
        }
    </style>
</head>
<body>
    <jsp:include page="layout/head.jsp"/>
    <div class="banner"></div>
    <%-- 5大优势 --%>
    <div class="commonBg fiveAdvantages">
        <div class="content">
            <p class="title">5大优势</p>
            <p class="enTitle">FIVE ADVANTAGES</p>
            <p class="line"></p>
            <div class="cont">
                <img src="${frontPath}/images/QYMarketing/fiveAdvantages.png">
            </div>
        </div>
    </div>
    <%-- 服务 --%>
    <div class="commonBg service">
        <div class="content">
            <p class="title">服务</p>
            <p class="enTitle">SERVICE</p>
            <p class="line"></p>
            <div class="cont">
                <div class="cont_img"></div>
                <div class="cont_txt cont_bottom">
                    <p class="cont_txt_t">热点创意</p>
                    <p class="cont_txt_b">针对品牌战略制定合适的营销时间</p>
                </div>
                <div class="cont_txt cont_top">
                    <p class="cont_txt_t">日常运营</p>
                    <p class="cont_txt_b">针对品牌调性契合的热点快速反应</p>
                </div>
                <div class="cont_txt cont_bottom">
                    <p class="cont_txt_t">口碑营销</p>
                    <p class="cont_txt_b">针对品牌调性传播相关内容保持互动</p>
                </div>
                <div class="cont_txt cont_top">
                    <p class="cont_txt_t">事件营销</p>
                    <p class="cont_txt_b">针对产品特点进行口碑传播维护声量</p>
                </div>
                <div class="cont_txt cont_bottom">
                    <p class="cont_txt_t">话题策划</p>
                    <p class="cont_txt_b">根据舆论环境目标策划创意话题</p>
                </div>
            </div>
        </div>
    </div>
    <%-- 技术支持 --%>
    <div class="commonBg technicalSupport">
        <div class="content">
            <p class="title">技术支持</p>
            <p class="enTitle">TECHNICAL SUPPORT</p>
            <p class="line"></p>
            <div class="cont">
                <div class="cont_t" style="margin-left: 47px;">
                    <img src="${frontPath}/images/QYMarketing/tu1.png">
                </div>
                <div class="cont_t">
                    <img src="${frontPath}/images/QYMarketing/tu2.png">
                </div>
                <div class="cont_t">
                    <img src="${frontPath}/images/QYMarketing/tu3.png">
                </div>
                <div class="cont_t">
                    <img src="${frontPath}/images/QYMarketing/tu4.png">
                </div>
            </div>
            <div class="cont_bottom">
                <label class="cont_bottom_txt">大数据挖掘</label>
                <label class="cont_hr"></label>
                <label class="cont_bottom_txt">H5游戏</label>
                <label class="cont_hr"></label>
                <label class="cont_bottom_txt">小程序</label>
                <label class="cont_hr"></label>
                <label class="cont_bottom_txt">APP开发</label>
            </div>

        </div>
    </div>
    <%-- 媒介 --%>
    <div class="commonBg medium">
        <div class="content">
            <p class="title">媒介</p>
            <p class="enTitle">MEDIUM</p>
            <p class="line"></p>
            <div class="cont">
                <div class="cont_l">
                    <label class="cont_txt">
                        全面定制国内最领先的社交媒体<br/>
                        KOL而贴心推荐
                    </label>
                    <label class="cont_in cont_txt" >
                        专人策划·贴心指导
                    </label>
                    <label class="cont_txt">
                        汇聚了横跨诸多社交媒体平台<br/>
                        数十万社交自媒体资源<br/>
                        为数万企业提供社交自媒体数据分析<br/>
                    </label>
                </div>
                <div class="cont_r">
                    <label class="cont_img">
                        <img src="${frontPath}/images/QYMarketing/tu5.png">
                    </label>
                    <label class="cont_txt cont_rr">
                        <label class="cont_txt_line"></label>
                        名人媒体1000+
                    </label>
                    <label class="cont_txt cont_rr" style="top: 70px;">
                        <label class="cont_txt_line"></label>
                        领袖资源10000+
                    </label>
                    <label class="cont_txt cont_rr" style="top: 125px;">
                        <label class="cont_txt_line"></label>
                        微信大V60000+
                    </label>
                    <label class="cont_txt cont_rr" style="top: 180px;">
                        <label class="cont_txt_line"></label>
                        草根微博20000+
                    </label>
                    <label class="cont_txt cont_rr" style="top: 235px;">
                        <label class="cont_txt_line"></label>
                        段子手80000+
                    </label>
                </div>
            </div>
            <div class="medium_down">
                <div class="medium_down_l">
                    <div></div>
                </div>
                <div class="medium_down_in">
                    <div class="medium_down_in_txt">
                        <p class="medium_in_title">社会化媒体平台</p>
                        <label style="width: 50px;height: 1px;background-color: #2AD1FD;margin: 20px 0px"></label>
                        <p class="medium_in_txt">微博·微信</p>
                        <p class="medium_in_txt">QQ空间</p>
                        <p class="medium_in_txt">淘宝·天猫</p>
                        <p class="medium_in_txt">BBS</p>
                    </div>
                    <div class="medium_down_in_hr"></div>
                    <div class="medium_down_in_txt">
                        <p class="medium_in_title">程序化购买平台</p>
                        <label style="width: 50px;height: 1px;background-color: #2AD1FD;margin: 20px 0px"></label>
                        <p class="medium_in_txt">今日头条</p>
                        <p class="medium_in_txt">广点通</p>
                        <p class="medium_in_txt">新浪扶翼</p>
                        <p class="medium_in_txt">粉丝通等</p>
                    </div>
                    <div class="medium_down_in_hr"></div>
                    <div class="medium_down_in_txt">
                        <p class="medium_in_title">应用分发市场</p>
                        <label style="width: 50px;height: 1px;background-color: #2AD1FD;margin: 20px 0px"></label>
                        <p class="medium_in_txt">百度应用</p>
                        <p class="medium_in_txt">应用宝</p>
                        <p class="medium_in_txt">豌豆荚</p>
                        <p class="medium_in_txt">360应用</p>
                    </div>
                    <div class="medium_down_in_hr"></div>
                    <div class="medium_down_in_txt">
                        <p class="medium_in_title">超级APP合作</p>
                        <label style="width: 50px;height: 1px;background-color: #2AD1FD;margin: 20px 0px"></label>
                        <p class="medium_in_txt">墨迹天气</p>
                        <p class="medium_in_txt">今日头条</p>
                        <p class="medium_in_txt">一点资讯</p>
                        <p class="medium_in_txt">喜马拉雅等</p>
                    </div>
                </div>
                <div class="medium_down_r">
                    <div style="height: 210px;"></div>
                    <div style="width: 100%;height: 80px;border-right: 1px solid #2AD1FD;border-bottom: 1px solid #2AD1FD;"></div>
                </div>
            </div>
        </div>
    </div>

    <%-- 案例 --%>
    <div class="commonBg case">
        <div class="content">
            <p class="title">案例</p>
            <p class="enTitle">CASE</p>
            <p class="line"></p>
            <div class="cont">
                <div class="cont_l">
                    <video class="cont_l_vadio" src="${frontPath}/images/QYMarketing/1530097954.mp4"
                           controls="controls" autoplay loop></video>
                </div>
                <div class="cont_in">
                    <div class="cont_in_top"></div>
                    <div class="cont_in_down">
                        <div class="cont_in_down_yuan"></div>
                    </div>
                </div>
                <div class="cont_r">
                    <p class="cont_r_title">尚远整合营销案—恒大</p>
                    <p class="line"></p>
                    <p class="cont_r_txt">
                        尚远信息为恒大人寿策划了全套的解决方案，包含多张海报，以及微电影，H5，以及相关
                        投放渠道和媒介的投放整体个H5有效阅读量50w+，微电影超过10w+，各类媒体，转发
                        达到300+。
                    </p>
                </div>
            </div>
            <div class="down">
                <div class="down_img">
                    <img src="${frontPath}/images/QYMarketing/tu7.png">
                </div>
                <div class="down_img">
                    <img src="${frontPath}/images/QYMarketing/tu8.png">
                </div>
                <div class="down_img">
                    <img src="${frontPath}/images/QYMarketing/tu9.png">
                </div>
                <div class="down_img" style="margin-right: 0px!important;">
                    <img src="${frontPath}/images/QYMarketing/tu10.png">
                </div>
            </div>
        </div>
    </div>


    <jsp:include page="layout/foot.jsp"/>
</body>
<script>
    $(function () {

    });
</script>
</html>
